{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <div>
            <div class="layui-row layui-col-space1">
                <div class="layui-col-xs3">
                    <span>
                        <div>应用访问</div>
                        <div><label id="type1Total"></label></div>
                        <div>昨日<label id="type1Today"></label></div>
                    </span>
                </div>
                <div class="layui-col-xs3">
                    <span>
                        <div>名片创建</div>
                        <div><label id="type2Total"></label></div>
                        <div>昨日<label id="type2Today"></label></div>
                    </span>
                </div>
                <div class="layui-col-xs3">
                    <span>
                        <div>成果认领</div>
                        <div><label id="type3Total"></label></div>
                        <div>昨日<label id="type3Today"></label></div>
                    </span>
                </div>
                <div class="layui-col-xs3">
                    <span>
                        <div>名片分享</div>
                        <div><label id="type4Total"></label></div>
                        <div>昨日<label id="type4Today"></label></div>
                    </span>
                </div>
            </div>
        </div>
        <div id="echarts" style="height: 300px"></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <div class="layui-inline"><label>TOP10</label></div>
                <div class="layui-inline" style="margin-left: 40%">
                    <div class="layui-inline">排序</div>
                    <div class="layui-inline">
                        <select class="layui-select" id="orderColumn" name="orderColumn">
                            <option value="viewCount" {if condition="input('orderColumn') eq 'viewCount'" }selected="selected"{/if}>访问数量</option>
                            <option value="receiveCount" {if condition="input('orderColumn') eq 'receiveCount'" }selected="selected"{/if}>认领数量</option>
                            <option value="shareCount" {if condition="input('orderColumn') eq 'shareCount'" }selected="selected"{/if}>分享数量</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <table id="top10Table" class="layui-table layui-form" lay-filter="top10Table"></table>
        </div>
        <div>明细</div>
        <table class="layui-table layui-form">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>机构</th>
                    <th>名片创建时间</th>
                    <th>最近使用时间</th>
                    <th>最近操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach name="list" item="v" empty="$empty"}
                <tr>
                    <td>{$v.user_name}</td>
                    <td>{$v.institute}</td>
                    <td>{$v.create_time}</td>
                    <td>{$v.update_time}</td>
                    <td>
                        {if $v.type == 1}访问
                        {elseif $v.type == 2}创建
                        {elseif $v.type == 3}认领
                        {elseif $v.type == 4}分享
                        {/if}
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
        <div class="page">{$list->render()}</div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use('table', function() {
        var table = layui.table, form = layui.form;

        //渲染表格
        table.render({
            id: 'top10Table',
            elem: '#top10Table',
            url: '/admin/user/top10Log',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {field: 'user_name', title: '姓名'},
                {field: 'institute', title: '机构'},
                {field: 'viewCount', title: '访问'},
                {field: 'receiveCount', title: '认领'},
                {field: 'shareCount', title: '分享'},
            ]]
        });

        $('.layui-btn').on('click', function () {
            var orderColumn = $('#orderColumn').val();
            table.reload('top10Table', {
                where: {
                    'orderColumn': orderColumn
                }
            })
        })
    })

    $(function() {
        initData();
        initChart();
    });

    function initData() {
        $.ajax({
            url: '/admin/user/logTotal',
            type: 'POST',
            dataType: 'json',
            success: function(result) {
                if (result.code === 1) {
                    $('#type1Total').html(result.data.type1Total);
                    $('#type1Today').html(result.data.type1Today);
                    $('#type2Total').html(result.data.type2Total);
                    $('#type2Today').html(result.data.type2Today);
                    $('#type3Total').html(result.data.type3Total);
                    $('#type3Today').html(result.data.type3Today);
                    $('#type4Total').html(result.data.type4Total);
                    $('#type4Today').html(result.data.type4Today);
                }
            }
        });
    }

    function initChart() {
        $.ajax({
            url: '/admin/user/logChartIndex',
            type: 'POST',
            dataType: 'json',
            success: function(result) {
                if (result.code === 1) {
                    var dts = result.data.dts;
                    if (dts.length <= 0) {
                        return
                    }
                    var line = [];
                    var yline = [];
                    for (i = 0; i < dts.length; i++) {
                        line[i] = dts[i].dt;
                        yline[i] = dts[i].count;
                    }
                    var chartDom = document.getElementById('echarts');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        xAxis: {
                            type: 'category',
                            data: line
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: yline,
                            type: 'line'
                        }],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        }
                    }
                    option && myChart.setOption(option);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (xhr, state, errorThrown) {
                layer.msg(state + '：' + errorThrown);
            }
        });
    }
</script>
{/block}